<!--
 * @Descripttion: 售后管理(供应商)
 * @version:
 * @Author: 常帅
 * @Date: 2020-09-30 14:43
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-24 08:58:19
-->
<template>
  <div>
    <el-row :gutter="10">
      <el-card class="box-card">
          <!-- 搜索 -->
          <e-control
            :search-form-options="formOptions"
            :btns="btns"
            @on-search="onSearch"
          ></e-control>
          <el-button @click="refuseRegEvent()" type="danger" size="small">退回</el-button>
          <el-button @click="queryDtailEvent()" type="primary" size="small">查看</el-button>
          <span class="tips">注：请在中心审核后三天内完成售后订单的处理，超时将无法拒绝退货申请。</span>
          <!-- 表格 -->
          <el-table :data="tableData" border style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentRowChange"
          :height="maxHeightNow">
            <el-table-column prop="id" v-if="false" label="1"></el-table-column>
            <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
            <el-table-column prop="afterSaleId" label="售后订单号" width="280"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="200"></el-table-column>
            <el-table-column prop="skuCode" label="sku"></el-table-column>
            <el-table-column prop="price" label="含税单价（元）" width="100"></el-table-column>
            <el-table-column prop="excludeTaxPrice" label="未税单价（元）" width="100"></el-table-column>
            <el-table-column prop="afterSaleNum" label="数量"></el-table-column>
            <el-table-column prop="fixedPrice" label="含税总价" width="100"></el-table-column>
            <el-table-column prop="sumExcludeTaxPrice" label="未税总价" width="100"></el-table-column>
            <el-table-column prop="typeNo" label="型号"></el-table-column>
            <el-table-column prop="name" label="采购人"></el-table-column>
            <el-table-column prop="centerAuditStatusValue" label="退换货状态" width="100"></el-table-column>
            <el-table-column prop="afterSaleReason" label="退换货原因" width="130"></el-table-column>
            <el-table-column prop="serviceType" label="类型"></el-table-column>
            <el-table-column prop="mobile" label="采购人电话" width="110"></el-table-column>
            <el-table-column prop="buyNum" label="采购数量"></el-table-column>
            <el-table-column prop="centerAuditTime" width="160" label="中心审核时间"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
          ></el-pagination>
      </el-card>
      </el-col>
    </el-row>

<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
  <el-form
        :label-position="'right'"
        :rules="rules"
        label-width="120px"
        :model="form"
        label-suffix=":"
        ref="form">
    <el-row>
      <el-col :span="20">
        <el-form-item label="退回理由" prop="auditRemark">
          <el-input type="textarea"
                    show-word-limit
                    maxlength="1000"
                    :rows="4"
                    v-model="form.auditRemark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- todo 显示供应商信息 -->
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeRefundDialog">关 闭</el-button>
    <el-button type="primary" @click="handleSubmit">保 存</el-button>
  </div>
</el-dialog>

<el-dialog :title="dialogTitle" :visible.sync="detailDialogVisible">
  <el-form
        :label-position="'right'"
        label-width="120px"
        :model="detail"
        label-suffix=":"
        disabled='true'
        ref="detail">
    <el-row>
      <el-col :span="12">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="detail.goodsName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="detail.orderNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下单时间" prop="orderTime">
          <el-input v-model="detail.orderTime"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="采购人" prop="name">
          <el-input v-model="detail.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="SKU" prop="skuCode">
          <el-input v-model="detail.skuCode"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="含税单价" prop="price">
          <el-input v-model="detail.price"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="未税单价" prop="excludeTaxPrice">
          <el-input v-model="detail.excludeTaxPrice"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数量" prop="afterSaleNum">
          <el-input v-model="detail.afterSaleNum"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="含税总价" prop="fixedPrice">
          <el-input v-model="detail.fixedPrice"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="未税总价" prop="sumExcludeTaxPrice">
          <el-input v-model="detail.sumExcludeTaxPrice"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
        <el-form-item label="未税总价" prop="sumExcludeTaxPrice">
          <el-input v-model="detail.sumExcludeTaxPrice"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退换货状态" prop="centerAuditStatusValue">
          <el-input v-model="detail.centerAuditStatusValue"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="detail.centerAuditStatus === '3' || detail.centerAuditStatus === '2'">
        <el-form-item label="退回原因" prop="auditRemark">
          <el-input v-model="detail.auditRemark"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申请时间" prop="submitTime">
          <el-input v-model="detail.submitTime"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="回复时间" prop="auditTime">
          <el-input v-model="detail.auditTime"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退换货原因" prop="reasonDescription">
          <el-input type="textarea" :rows="4" v-model="detail.reasonDescription" maxlength="1000" show-word-limit></el-input>
        </el-form-item>
      </el-col>
      <p v-for="(item, index) in picList" :key="index">
        <el-col :span="12">
        <el-form-item
          :label="'附件图片' + (index+1)"
          prop="pic">
          <el-image :src="item" style="width:80px;height:80px" :preview-src-list="picList" ></el-image>
        </el-form-item>
      </el-col>
      </p>

    </el-row>
    <!-- todo 显示供应商信息 -->
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="detailDialogVisible = false">关 闭</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
import eControl from "@/components/e-control";
import { formOptions, btns } from "./control";
// import editFormOptions from "./form";
import {
  getSupplierAfterSaleList,
  getpurchaserOrg,
  approveReg,
  refuseReg,
  centerAudit,
  supplierAudit,
} from "@/api/admin.api";
import {getFileUrl,queryFileList} from  "@/api/common.api";
export default {
  name: "afterSale",
  components: {
    eControl,
  },
  data() {
    return {
      // 用户类型 0 采购人；1 供应商
      userType: "0",
      formOptions,
      btns,
      // columns,
      // editFormOptions,
      dialogRoleVisible: false,
      editDialogTitle: "新增用户",
      editDialogShow: false,
      setRole: "",
      // 编辑框表单数据
      dialogFormCurrent: {},
      searchData:{},
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {
        auditRemark: ''
      },
      detail: {attactments:""},
      // 显示打回审核弹窗
      dialogVisible: false,
      // 详情展示弹窗
      detailDialogVisible: false,
      // 表格数据
      tableData: [],
      // 弹窗标题
      dialogTitle: "",
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      currentRow: null,
      rules: {
        auditRemark: [
          { required: true, trigger: "blur", message: "退回理由不能为空" },
        ],
      },
      picList : []
    };
  },
  watch: {},
  computed: {
    // 表单实例
    dialogForm() {
      return this.$refs.dialogForm;
    },
    // 表格高度
    maxHeightNow() {
      const height = window.innerHeight;
      // return height - 290;
      return height - 380;
    },
  },
  created() {
    this.init();
    // this.getpurchaserOrgEvent();
  },
  mounted() {},
  methods: {
    closeRefundDialog(){
        this.dialogVisible = false;
    },
    // 初始化
    init(data = {}) {
      // todo 清空条件
      this.currentPage = 1;
      this.pageSize = 10;
      // if (this.userType=='1') {
      //   // todo 获取供应商列表
      // }else{
      this.getAfterSaleListEvent(data);
      // }
    },
    // 切换tab
    tabClick(tab) {
      this.init();
      this.getpurchaserOrgEvent();
    },
    // 查询售后订单列表
    getAfterSaleListEvent(data) {
      let params = {
        size: this.pageSize,
        current: this.currentPage,
        goodsName: data.goodsName,
        name: data.name,
        submitTimeBegin: data.submitTimeBegin,
        submitTimeEnd: data.submitTimeEnd,
        orderNo: data.orderNo,
        sku: data.sku,
        centerAuditStatus: data.centerAuditStatus,
        typeNo : data.typeNo
      };
      getSupplierAfterSaleList(params).then((res) => {
        this.tableData = res.records;
        this.totalPage = res.total;
      });
    },
    // 查询采购人|供应商组织
    getpurchaserOrgEvent() {
      getpurchaserOrg(this.userType).then((res) => {
        this.formOptions[2].props.options = res;
        // 供应商
        if (this.userType == "1") {
          this.formOptions[2].props.props.label = "orgNameZh";
        } else {
          this.formOptions[2].props.props.label = "name";
        }
      });
    },
    // 审核通过
    approveRegEvent() {
      if (this.currentRow == null) {
        this.$message({
          message: "请求选择要审核的记录",
          type: "error",
        });
        return false;
      }
      if (this.currentRow.centerAuditStatus != 0) {
        this.$message({
          message: "只能审核待审核记录",
          type: "error",
        });
        return false;
      }
      this.$confirm("确定通过此申请吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let updateParam = {
          afterSaleId: this.currentRow.id,
          centerAuditStatus: 1,
        };
        centerAudit(updateParam).then((res) => {
          this.$message({
            message: "执行成功",
            type: "success",
          });
          this.init();
        });
      });
    },
    // 审核拒绝
    refuseRegEvent() {
      if (this.currentRow == null) {
        this.$message({
          message: "请求选择要退回的记录",
          type: "error",
        });
        return false;
      }
       if(this.currentRow.centerAuditStatus!=1){
        this.$message({
            message: '只能退回中心审核通过的记录',
            type: 'error'
          })
         return false;
      }
      this.form.auditRemark = '';
      this.dialogTitle = "退回信息";
      this.dialogVisible = true;
    },
    queryDtailEvent() {
      this.picList.length = 0;
      if (this.currentRow == null) {
        this.$message({
          message: "请求选择要查看的记录",
          type: "error",
        });
        return false;
      }
      // 查询图片地址集合
      var detailParam = {
        sourceIds : this.currentRow.attactments
      }
      queryFileList(5,detailParam).then(res=>{
        for(var i=0;i<res.length;i++){
          this.picList.push(res[i].url);
        }
        this.detail = this.currentRow;
      this.detailDialogVisible = true;
      this.dialogTitle = "查看退换货信息";
      }).catch(err=>{
        this.picList = [];
        this.detail = this.currentRow;
      this.detailDialogVisible = true;
      this.dialogTitle = "查看退换货信息";
      })
    },
    // 确定
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let updateParam = {
            afterSaleId: this.currentRow.id,
            businessAuditStatus: 2,
            auditRemark: this.form.auditRemark,
          };
          supplierAudit(updateParam).then((res) => {
            this.$alert("退回成功", "提示", {
              confirmButtonText: "确定",
              type: "success",
              callback: (action) => {
                this.dialogVisible = false;
                this.init();
              },
            });
          });
        }
      });
    },
    handleOther(data) {
      console.log(data);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleRoleClose(done) {
      // this.dialogRoleVisible = false
      done();
    },
    // 搜索
    onSearch(data) {
      this.searchData = data;
      this.init(data);
    },
    // 新增
    onInsert() {
      this.editDialogTitle = "新增用户";
      this.editDialogShow = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAfterSaleListEvent(this.searchData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAfterSaleListEvent(this.searchData);
    },
    handleCurrentRowChange(val) {
      console.log(`当前行: ${val}`);
      this.currentRow = val;
    },
    /**
     * @functionName closeDialog
     * @description 关闭编辑框
     * @author 张航
     * @date 2020-09-08 14:27:02
     * @version V1.0.0
     */
    closeDialog() {
      this.editDialogType = 0;
      this.editDialogShow = false;
    },
    /**
     * @functionName cancelDialogData
     * @description 取消保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:17:11
     * @version V1.0.0
     */
    cancelDialogDataHandle() {
      this.dialogForm.handleRefresh();
      this.closeDialog();
    },
    /**
     * @functionName saveDialogData
     * @description 保存弹框数据
     * @author 张航
     * @date 2020-09-08 18:15:14
     * @version V1.0.0
     */
    saveDialogDataHandle() {
      const {
        insert: { url, type = "GET" },
      } = this.interFace;
      console.log(this.dialogForm.formData);
      this.interFaceEvent(url, this.dialogForm.formData, type).then((res) => {
        // console.log(res);
        this.dialogForm.handleRefresh();
        this.closeDialog();
        this.$message({
          message: "保存成功",
          type: "success",
        });
      });
    },
    /**
     * @functionName interFaceEvent
     * @param {String|} url 请求地址
     * @param {Object} data 请求参数
     * @param {String} type 请求类型，默认为GET
     * @return {Promise} 返回结果
     * @description 接口访问
     * @author 张航
     * @date 2020-09-14 16:14:51
     * @version V1.0.0
     */
    interFaceEvent(url, data, type = "GET") {
      let _url = url;
      const _type = type.toLowerCase();
      if (_type === "get") {
        _url = _url + this.$tools.urlParam(data);
      }
      return this.$api[_type](_url, data);
    },
  },
};
</script>
<style scoped lang="scss">
.box-card {
  margin: 4px;
  height: calc(100vh - 120px);
  .el-card__body {
    padding: 0;
  }
  .el-table {
    margin-top: 20px;
  }
  .el-pagination {
    text-align: right;
  }
  .tips{
    color: $--color-danger;
    margin: 0 40px;
  }
}
.abc-header {
  color: #0000ff;
}
.abc {
  font-weight: bold;
  color: #e53939;
}
.selectRole {
  padding: 30px;
  box-sizing: border-box;
  .el-select {
    width: 100%;
  }
}
</style>
